<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="${path}/static/layui/css/layui.css" media="all">
</head>
<body>
	
	<!-- 	<form id="ajax_form" method="post" onsubmit="return false"> -->
	<!-- 		姓名:<input type="text" name="name"/><br/> -->
	<!-- 		年龄:<input type="text" name="age"/><br/> -->
	<!-- 		性别:<input type="text" name="gender"/><br/> -->
				
	<!-- 		<input type="submit" value="添加" onclick="submitForm()" class="btn btn-success"/>	 -->
	<!-- 	</form> -->
	<%-- 	<script src="${path}/js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> --%>
	<%-- 	<script src="${path}/js/layer/layer/layer.js" type="text/javascript" charset="utf-8"></script> --%>
	<%-- 	<script src="${path}/js/layer/layer/mylayer.js" type="text/javascript" charset="utf-8"></script> --%>
	<%-- 	<script src="${path}/js/layer/layer/util.js" type="text/javascript" charset="utf-8"></script> --%>
	
	
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
	  <legend>添加信息</legend>
	</fieldset>
	<form class="layui-form layui-form-pane" id="ajax_form" method="post" onsubmit="return false">
	  <div class="layui-form-item">
	    <label class="layui-form-label">姓名</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" autocomplete="off" placeholder="姓名" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">年龄</label>
	    <div class="layui-input-inline">
	      <input type="text" name="age" lay-verify="required" placeholder="年龄" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item" pane="">
	    <label class="layui-form-label">性别</label>
	    <div class="layui-input-block">
	      <input type="radio" name="gender" value="男" title="男" checked="">
	      <input type="radio" name="gender" value="女" title="女">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">生日</label>
	    <div class="layui-input-inline">
<!-- 	      <input type="text" name="birthday" lay-verify="required" placeholder="生日" autocomplete="off" class="layui-input"> -->
	      <input type="text" name="birthday"  class="layui-input" id="birthdayId" placeholder="yyyy-MM-dd">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <button class="layui-btn" onclick="submitForm()" value="添加">添加</button>
	  </div>
	</form>

	<script src="${path}/static/jquery-1.11.3.js"></script>
	<script src="${path}/static/mylayer.js"></script>
	<script src="${path}/static/util.js"></script>
	<script src="${path}/static/layui/layui.js"></script>
	<script>
	layui.use(['form', 'laydate'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,laydate = layui.laydate;
	  
	  laydate.render({
		  elem: '#birthdayId'
		  ,trigger: 'click'
	  });
	  
	});
	
	function submitForm() {
		console.log("submitForm");
		var name = $("#name").val();
		var age = $("#age").val();
		var birthday = $("#birthday").val();
		
		if(util.isEmpty(name)){
			mylayer.errorMsg("用户名不能为空");
			return;
		}
		
		if(util.isEmpty(age)){
			mylayer.errorMsg("年龄不能为空");
			return;
		}
		
		var pattern = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
		if(!pattern.test(age)){
			mylayer.errorMsg("年龄非法，请输入1-120之间的岁数");
			return;
		}
		
		if(util.isEmpty(birthday)){
			mylayer.errorMsg("生日不能为空");
			return;
		}
		
		var pattern = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
		if(!pattern.test(birthday)){
			mylayer.errorMsg("生日非法，请输入正确的生日");
			return;
		}
		
		$.ajax({
			url : "${path}/student/insert.action",
			type : "post",
			dataType : "json",
			data : $("#ajax_form").serialize(),
			success : function(jsonObj) {
				console.log(jsonObj);
				if(jsonObj.code == util.SUCCESS) {
					mylayer.successMsg(jsonObj.msg);
					//当你在iframe页面关闭自身时
					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					setTimeout(function(){
						parent.layer.close(index); //再执行关闭 
						// 刷新父页面
						window.parent.location.reload();
					},1000);
				} else {
					mylayer.errorMsg(jsonObj.msg);
				}
				
			}
		});
	}
</script>
	
</body>
</html>